<template>
  <div class="goods">
    <my-nav-bar
      left-arrow
      left-text="返回"
      title="商品列表"
      @click-left="$router.back()"
    ></my-nav-bar>
    <!--  :immediate-check="false"  控制初始化是否加载 -->
    <van-pull-refresh v-model="pullloading" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        ref="vanList"
        :immediate-check="false"
        :disabled="disabled"
        :finished="finished"
        offset="30"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ul class="gd_ct">
          <li v-for="(item, index) in goodsList" :key="index" @click="goDetail(item)">
            <img
              :src="
                item.goods_big_logo
                  ? item.goods_big_logo
                  : require('../assets/img/logo.png')
              "
              alt=""
            />
            <section>
              <h4>{{ item.goods_name }}</h4>
              <p>￥{{ item.goods_price }}</p>
            </section>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
    <van-icon v-show="show" name="arrow-up" class="gotop" @click="gotop" />
  </div>
</template>
<script>
import { getGoods } from "../api/other/index";
export default {
  data() {
    return {
      goodsList: [], // 商品的列表数据
      loading: false, // 加载更多的loading效果
      finished: false, // 是否加载完成
      pullloading: false, // 下拉刷新触发的 loading
      pagenum: 1, // 页码
      disabled: false, // 是否禁止滚动加载
      show: false, // 是否显示回到顶部
    };
  },
  created() {
    console.log(this.$route.query);
    // this.$route.query.id 路由传入的分类的id
    // 调用接口的时候，要传一个 cid 分类id
    this.onLoad();
  },
  mounted() {
    // let that = this;
    this.$refs.vanList.$el.onscroll = (e) => {
      // this 指向div节点
      if (e.target.scrollTop > 100) {
        this.show = true;
      } else {
        this.show = false;
      }
    };
  },
  methods: {
    onRefresh() {
      // 下拉刷新触发的函数
      this.pagenum = 1; // 页码归1
      this.goodsList = []; // 清空商品数据
      this.finished = false; // 转换加载更多的状态
      this.disabled = true; // 刷新禁止加载
      this.onLoad();
      // this.disabled = false;
    },
    onLoad() {
      // console.log("cvbn");
      // 加载更多触发的事件
      // pagesize 每页多少条数据
      // pagenum 第几页
      getGoods({ cid: this.$route.query.id, pagenum: this.pagenum, pagesize: 10 }).then(
        (res) => {
          // 加载更多的时候，要使用数组的拼接;
          // this.goodsList = this.goodsList.concat(res.message.goods);
          this.goodsList = [...this.goodsList, ...res.message.goods];
          this.loading = false; // 关闭loading 效果
          this.pullloading = false; // 关闭刷新的 loading 效果
          this.disabled = false; // 关闭滚动加载的禁止
          // this.pagenum++;
          if (this.pagenum * 10 < res.message.total) {
            // 判断是否有更多的数据
            this.pagenum++;
          } else {
            this.finished = true;
          }
        }
      );
    },
    gotop() {
      // 回到顶部的事件
      // console.log(this.$refs.scrollBox);
      // this.$refs.vanList.scrollTop = 0;
      // this.$refs.vanList.$el.scrollTop = 0;
      let num = this.$refs.vanList.$el.scrollTop;
      let clearTime = null;
      if (num > 0) {
        clearTime = setInterval(() => {
          num = num - 20;
          if (num < 0) {
            clearInterval(clearTime);
          }
          this.$refs.vanList.$el.scrollTop = num;
        }, 0);
      }
      // console.log(this.$refs.vanList.$el.scrollTop);
    },
    goDetail(val) {
      // 跳转到商品详情页面
      this.$router.push(`/detail/${val.goods_id}`);
    },
  },
};
</script>
<style lang="scss" scoped>
.goods {
  height: 100%;
  overflow: hidden;
}
.van-pull-refresh {
  height: calc(100% - 50px);
}
.van-list {
  height: 100%;
  overflow-y: auto;
}
.gd_ct {
  li {
    display: flex;
    padding: 5px 15px;
    box-sizing: border-box;
    align-items: center;
    font-size: 16px;
    margin-top: 10px;
    img {
      width: 70px;
      margin-right: 10px;
    }
    section {
      flex: 1;
      h4 {
        line-height: 20px;
      }
      p {
        margin-top: 10px;
        color: red;
      }
    }
  }
}
.gotop {
  position: fixed;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #ccc;
  border-radius: 50%;
  bottom: 50px;
  right: 10px;
  color: #fff;
}
</style>
